<template>
<div class="charts-border" style="height:400px;width:100%;">
  <v-chart
      :options="option"
      :autoresize="true"
      theme="chartsTheme"
    />
</div>
</template>
<script>

export default {
  components: {},
  data() {
    return {
      option: {
        title: {
          text: "各站点服务人次",
          // left: "left",
          y: "10",
          // textStyle: {
          //   color: "#fff"
          // }
        },
        // backgroundColor: "#101a3c",
        grid: {
          left: "4%",
          top: "10%",
          bottom: 10
        },
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 12
          },
          formatter: "{b0}:{c0}"
        },
        xAxis: {
          max: 300,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis:
        {
          type: "category",
          inverse: false,
          data: [
            "西门",
            "西万路",
            "明德门",
            "草滩路",
            "凤城十路",
            "朱宏路"
          ],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: -4,
            textStyle: {
              color: "#fff",
              fontSize: 16.25
            }
          }
        },
        series: [
          {
            type: "pictorialBar",
            symbol:
              "image://",
            symbolRepeat: "fixed",
            symbolMargin: "5%",
            symbolClip: true,
            symbolSize: 22.5,
            symbolPosition: "start",
            symbolOffset: [20, 0],
            // symbolBoundingData: 300,
            data: [113, 42, 67, 81, 86, 94],
            z: 10
          },
          {
            type: "pictorialBar",
            itemStyle: {
              normal: {
                opacity: 0.3
              }
            },
            label: {
              normal: {
                show: true,
                formatter: function(params) {
                  return params.value
                },
                position: "right",
                offset: [10, 0],
                textStyle: {
                  color: "green",
                  fontSize: 18
                }
              }
            },
            animationDuration: 0,
            symbolRepeat: "fixed",
            symbolMargin: "5%",
            symbol:
              "image://",
            symbolSize: 22.5,
            // symbolBoundingData: 300,
            symbolPosition: "start",
            symbolOffset: [20, 0],
            data: [113, 42, 67, 81, 86, 94],
            z: 5
          }
        ],
        servicePersonsList: [
          {name: '西万路', value: 100},
          {name: '西门', value: 100},
          {name: '明德门', value: 100},
          {name: '草滩路', value: 100},
          {name: '朱宏路', value: 100},
          {name: '凤城十路', value: 100},
        ]
      }
    };
  },
  mounted() {
    this.servicePersonsList = this.servicePersonsList.sort((a, b) => b.value-a.value)
    // console.log(this.servicePersonsList)
    this.servicePersonsList.map((element, index) => {
      // console.log(element, index)
      this.option.yAxis.data.splice(index, 1, element.name)
      this.option.series[0].data.splice(index, 1, element.value)
      this.option.series[1].data.splice(index, 1, element.value)
    })
    setInterval(()=>{
      this.servicePersonsList[Math.round(Math.random()*5)].value += Math.round(Math.random()*100)
      this.servicePersonsList = this.servicePersonsList.sort((a, b) => b.value-a.value)
      // console.log(this.servicePersonsList)
      this.servicePersonsList.map((element, index) => {
        // console.log(element, index)
        this.option.yAxis.data.splice(index, 1, element.name)
        this.option.series[0].data.splice(index, 1, element.value)
        this.option.series[1].data.splice(index, 1, element.value)
      })
    }, 3000)
  },
  methods: {

  }
};
</script>

<style lang="less">
</style>

